<template>
  <div>
    <page-header
      title=" 在 线 预 约 "
      describe="实训室以及室内包含实验设备，实验耗材的在线预约"
    ></page-header>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="12">
          <a-card>
          <!-- 列表 -->
          <pro-table
            rowKey="id"
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <equimentData :visible="state.visibleEquimentData" :record="state.recordEquimentData"></equimentData>
            <consumableData :visible="state.visibleConsumableData" :record="state.recordConsumableData"></consumableData>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <save :visible="state.visibleSave" @close="closeSave" :record="state.recordSaveData"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </div>
  <a-modal width="1000px"   v-model:visible="visible" title="实训室预约队列" @ok="handleOk" :footer="null">
    <a-card v-for="item in paperList" :key="item">
      <a-descriptions>
        <a-descriptions-item label="申请用途">{{item.standby3}}</a-descriptions-item>
        <a-descriptions-item label="申请用户">{{item.createName}}</a-descriptions-item>
        <a-descriptions-item label="预约状态">{{ item.taState }}</a-descriptions-item>
        <a-descriptions-item label="开始时间">{{item.standby1}}</a-descriptions-item>
        <a-descriptions-item label="结束时间">{{ item.standby2}}</a-descriptions-item>
      </a-descriptions>
      <a-divider />
    </a-card>
  </a-modal>
</template>
<script>
import save from "./modal/save";
import edit from "./modal/edit";
import equimentData from "./modal/equimentData";
import consumableData from "./modal/consumableData";
import { page } from "@/api/module/laboratoryInfo";
import { reactive, ref } from 'vue';
import {paging} from "@/api/module/exam";
import {applyList, pageTac} from "@/api/module/TrainingApply";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    save,
    edit,
    equimentData: equimentData,
    consumableData: consumableData,
  },
  setup() {

    const tableRef = ref()
    const paperList = ref([])
    /// 文本
    const converFormat = [{label:"占用", value:"0"},{label:"空闲", value:"1"},{label:"维护", value:"2"}];

    const columns = [
      { dataIndex: "lainName", key: "lainName", title: "实训室名称" },
      { dataIndex: "propleNumber", key: "propleNumber", title: "容纳人数" },
      { dataIndex: "lainLocation", key: "lainLocation", title: "所在位置" },
      // { dataIndex: "lainState", key: "lainState", title: "实训室状态", conver: converFormat },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };


    /// 行操作
    const operate = [
      { label: "设备", event: function (record) { state.visibleEquimentData = true, state.recordEquimentData = record }},
      { label: "耗材", event: function (record) { state.visibleConsumableData = true, state.recordConsumableData = record }},
      { label: "预约", event: function (record) { state.visibleEdit = true, state.recordEdit = record }},
      // { label: "查看", event: function (record) {state.visibleSave = true , state.recordSaveData = record  }},
      { label: "查看", event: function (record) {
          const param = {
            taName:record.id,
            taType: 0,
          }
          applyList(param).then((response)=>{
            paperList.value = response.data
            console.log("详情列表+",response.data)
          });
        visible.value = true
      }},
    ];

    const pagination = { pageNum: 1, pageSize: 10 };

    const state = reactive({
      selectedRowKeys: [],
      param: { name: "", code: "" },
      visibleEdit: false,
      visibleSave: false,
      visibleEquimentData: false,
      visibleConsumableData: false,
      recordEquimentData: {},
      recordConsumableData: {},
      recordSaveData: {},
      recordEdit: {},
    });

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function(){
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function(){
      state.visibleEdit = false
      tableRef.value.reload()
    }


    const visible = ref(false);


    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };

    return {
      state,
      fetch,
      columns,
      operate,
      closeSave,
      closeEdit,
      pagination,
      onSelectChange,
      tableRef,
      visible,
      handleOk,
      paperList,
    };
  },
};
</script>
